<template>
  <div class="dui-tabs">
    <div class="dui-tabs-nav" ref="container">
      <div
        class="dui-tabs-nav-item"
        v-for="tab in tabList"
        :ref="(el) => { if (tab.name === selected) selectedItem = el }"
        :class="{ selected: tab.name === selected }"
        :key="tab.name"
        @click="changeTab(tab)"
      >
        {{tab.title}}
      </div>

      <div class="dui-tabs-nav-indicator" ref="navIndicator"></div>
    </div>
    <div class="dui-tabs-content" v-if="selectedContent">
      <!-- 
      <component
        v-for="component in defaults"
        class="dui-tabs-content-item"
        :class="{ selectedContent: component.props.name === selected }"
        :key="component.props.name"
        :is="component"
      />
      -->
      <component
        class="dui-tabs-content-item"
        :key="selectedContent.props.name"
        :is="selectedContent"
      />
    </div>
  </div>
</template>

<script lang="ts">
import { computed, onMounted, onUpdated, ref, watchEffect } from 'vue';
import duiTab from './Tab.vue';

export default {
  props: {
    selected: {
      type: String,
    }
  },
  setup (props, context) {
    // @ts-ignore
    const selectedItem = ref<HTMLDivElement>(null);
    // @ts-ignore
    const navIndicator = ref<HTMLDivElement>(null);
    // @ts-ignore
    const container = ref<HTMLDivElement>(null);

    const calcIndicator = () => {
      // 计算滑动指示器宽度
      const { width, left: tabLeft } = selectedItem.value.getBoundingClientRect();
      navIndicator.value.style.width = width + 'px';

      // 计算左右位置
      const { left: navLeft } = container.value.getBoundingClientRect();
      const left = tabLeft - navLeft;
      navIndicator.value.style.left = left + 'px';
    }

    onMounted(() => {
      calcIndicator();
      // watchEffect(calcIndicator);
    });
    onUpdated(calcIndicator);

    // @ts-ignore
    const defaults = context.slots.default();

    defaults.forEach((tag) => {
      if (tag.type !== 'dui-tab') {
        throw new Error('Tabs can contain only Tab component with name "dui-tab"!');
      }
    });

    const tabList = defaults.map((tag) => {
      return tag.props || {};
    });

    const selectedContent = computed(() => {
      return defaults.filter((tag) => tag.props && (tag.props.name === props.selected))[0];
    });

    const changeTab = (tab: any) => {
      context.emit('update:selected', tab.name);
    }

    return { defaults, tabList, selectedContent, changeTab, selectedItem, navIndicator, container }
  }
}
</script>

<style lang="scss">
  @import '../../styles/util';

  .dui-tabs {

    &-nav {
      display: flex;
      color: $text-default;
      border-bottom: 1px solid $border-default;
      position: relative;

      &-item {
        padding: 8px 16px;
        margin: 0;
        cursor: pointer;

        &:first-child {
          margin-left: 0;
        }

        &.selected {
          color: $brand-primary;
        }
      }

      &-indicator {
        position: absolute;
        height: 3px;
        background: $brand-primary;
        left: 0;
        bottom: -1px;
        width: 100px;
        transition: all 250ms;
      }
    }

    &-content {
      padding: 8px 0;

      // &-item {
      //   display: none;
        
      //   &.selectedContent {
      //     display: block;
      //   }
      // }
    }
  }
</style>